<template>
  <div class="crewdoffset">
    <div class="bgg">
      <div class="card_title">
        组员报销
      </div>
      <div class="groupbox flex row_bet flex_wrap" style="margin-bottom: 19px">

        <a-radio-group class="br4" v-model="sceneId" style="margin-bottom: 5px;margin-left:5px;" @change="sceneIdChange">
          <a-radio-button value="-1">
            全部
          </a-radio-button>
          <a-radio-button :value="1">
            待审批
          </a-radio-button>
          <a-radio-button :value="2">
            审批未打款
          </a-radio-button>
          <a-radio-button :value="3">
            已打款
          </a-radio-button>
        </a-radio-group>

        <div class="flex row_left flex_wrap">
          <a-select
            label-in-value
            style="width: 207px;margin-right: 5px;"
            placeholder="请选择组员"
            @change="userChange"
            class="br4"
            v-model="userid"
            allowClear
          >
            <a-select-option :value="v.id" v-for="v in classList" :key="v.id">
              {{ v.user }}
            </a-select-option>
          </a-select>
          <a-input-search
            placeholder="活动id / 标题"
            style="width: 200px;margin-left:5px;margin-bottom: 5px"
            v-model="search"
            @search="onSearch"
          />
        </div>
      </div>
      <a-table
        :columns="columns"
        :rowKey="activity => activity.fin_id"
        :dataSource="activity"
        :loading="loading"
        @change="handleTableChange"
        :pagination="pagination"
      >
        <div slot="fin_goodsUrl" slot-scope="text,row">
          <div class="line-3" style="width: 288px;">{{ row.fin_goodsUrl }}</div>
        </div>
        <div slot="fin_makeUrl" slot-scope="text,row">
          <div :style="{color:row.fin_makeUrl!==null?'#39C15B':'#101010'}">{{ row.fin_makeUrl!==null?'已打款':'未打款' }}
          </div>
        </div>
        <div slot="fin_approval" slot-scope="text,row">
          <div :style="{color:row.fin_approval === '审批通过'?'#39C15B':'#101010'}">{{ row.fin_approval }}</div>
        </div>

      </a-table>
    </div>
  </div>
</template>

<script>
  import { getGrounpInfo } from '@/api/teamApi'
  import { getgroupfinance } from '@/api/crewApi'
  import moment from 'moment'

  export default {
    name: 'Crewdoffset',
    data () {
      return {
        moment,
        endtime: '',
        sceneId: '-1',
        commRate: '',
        search: '',
        userid: [],
        user_id: '',
        classList: [],
        columns: [
          {
            title: '组员',
            align: 'left',
            dataIndex: 'fin_user',
            scopedSlots: {
              customRender: 'fin_user'
            }
          },
          {
            title: '提交时间',
            align: 'left',
            dataIndex: 'fin_addTime',
            scopedSlots: {
              customRender: 'fin_addTime'
            }
          },
          {
            title: '店铺名称',
            align: 'center',
            dataIndex: 'fin_shopName',
            scopedSlots: {
              customRender: 'fin_shopName'
            }
          },
          {
            title: '产品连接',
            align: 'center',
            dataIndex: 'fin_goodsUrl',
            scopedSlots: {
              customRender: 'fin_goodsUrl'
            }
          },
          {
            title: '返现比例',
            align: 'center',
            dataIndex: 'fin_retPpt',
            scopedSlots: {
              customRender: 'fin_retPpt'
            }
          },
          {
            title: '返现金额',
            align: 'center',
            dataIndex: 'fin_retCash',
            scopedSlots: {
              customRender: 'fin_retCash'
            }
          },
          {
            title: '商家联系方式',
            align: 'center',
            dataIndex: 'fin_contact',
            scopedSlots: {
              customRender: 'fin_contact'
            }
          },
          {
            title: '打款方式',
            align: 'center',
            dataIndex: 'fin_payType',
            scopedSlots: {
              customRender: 'fin_payType'
            }
          },
          {
            title: '打款账号',
            align: 'center',
            dataIndex: 'fin_payUser',
            scopedSlots: {
              customRender: 'fin_payUser'
            }
          },
          {
            title: '税前',
            align: 'center',
            dataIndex: 'fin_pretax',
            scopedSlots: {
              customRender: 'fin_pretax'
            }
          },
          {
            title: '税后',
            align: 'center',
            dataIndex: 'fin_aftertax',
            scopedSlots: {
              customRender: 'fin_aftertax'
            }
          },
          {
            title: '备注',
            align: 'center',
            dataIndex: 'fin_reject',
            scopedSlots: {
              customRender: 'fin_reject'
            }
          },
          {
            title: '审批状态',
            align: 'center',
            // dataIndex: 'fin_approval',
            scopedSlots: {
              customRender: 'fin_approval'
            }
          },
          {
            title: '打款状态',
            align: 'center',
            dataIndex: 'fin_makeUrl',
            scopedSlots: {
              customRender: 'fin_makeUrl'
            }
          }
        ],
        activity: [
          // {
          //   fin_id: 751, // 自增id
          //   fin_user: '从雪艳', // 昵称
          //   fin_fileName: '20200831/9311653d8cf2e965bc435ce92cac63dd.xls', // 文件路径
          //   fin_shopName: '绿橡树旗舰店', // 店铺名称
          //   fin_goodsUrl: 'https://detail.tmall.com/item.htm?id=623788610787', // 商品地址
          //   fin_retPpt: '30', // 返现比例
          //   fin_retCash: '123.00', // 返现金额
          //   fin_addTime: '2020-12-04 13:37:26', // 添加时间
          //   fin_approval: '未审批', // 审批状态
          //   fin_makeMoney: null,
          //   fin_makeUrl: null, // 打款截图
          //   fin_contact: '测试', // 商家联系方式
          //   fin_payType: '支付宝', // 打款方式
          //   fin_payUser: '测试', // 打款账号
          //   fin_pretax: null, // 税前
          //   fin_aftertax: null, // 税后
          //   fin_reject: null // 审核备注
          // }
        ],
        loading: false,
        pagination: {
          pageSize: 15,
          page: 1
        },
        value: '',
        btnloading: false
      }
    },

    computed: {},
    created () {
      this.getGrounpInfo()
      this.getgroupfinance(1, 15)
    },
    mounted () {
    },
    methods: {
      getGrounpInfo () {
        getGrounpInfo().then(res => {
          // console.log(res)
          if (res.code === 200) {
            this.classList = res.data
          }
        }).catch(err => {
          console.log(err)
        })
      },
      userChange (value) {
        console.log(value) //
        if (value === undefined) {
          this.user_id = null
        } else {
          this.user_id = value.key
        }
        this.getgroupfinance(1, 15, this.search)
      },
      disabledEndDate (endValue) {
        if (!endValue) {
          return false
        }
        return endValue < moment().subtract(1, 'days') || endValue > moment().add(30, 'days')
      },
      sceneIdChange (e) {
        // console.log(this.sceneId)
        this.getgroupfinance(1, 15, this.search)
      },
      goaudit (row) {
        this.$store.dispatch('setRowsname', row)
        this.$router.push({
          path: '/activity/crewdOffset/myAudit'
        })
      },
      docopy (id) {
        const that = this
        const str = 'http://ad.alimama.com/zhaoshang/cpevent/index.htm?srcCode=1&keyword=' + id
        this.$copyText(str).then(
          function (e) {
            // console.log(e)
            that.$success({
              title: '链接复制成功',
              content: str
            })
          },
          function (e) {
            console.log(e)
          }
        )
      },
      getgroupfinance (page, pagesize, search) {
        this.loading = true
        getgroupfinance({
          page: page,
          pagesize: pagesize,
          type: this.sceneId, // -1全部，1未审批，2审批未打款，3已打款
          search: search,
          user_id: this.user_id
        })
          .then(res => {
            // console.log(res)
            this.activity = res.data.data
            //  this.count = res.data.count
            const pagination = {
              ...this.pagination
            }
            pagination.total = res.data.count
            this.pagination = pagination
            this.loading = false
          })
          .catch(err => {
            console.log(err)
          })
      },
      handleTableChange (pagination, filters) {
        // console.log(pagination)
        const pager = {
          ...this.pagination
        }
        pager.current = pagination.current
        this.pagination = pager
        this.fetch({
          results: pagination.pageSize,
          page: pagination.current,
          ...filters
        })
      },
      fetch (params = {}) {
        // console.log('params:', params)
        this.loading = true
        this.getgroupfinance(params.page, 15, this.search)
      },
      onSearch (value) {
        console.log(value)
        this.getgroupfinance(1, 15, this.search)
      },
      statusChange (e) {
        // console.log('radio checked', e.target.value)
        this.getgroupfinance(1, 15, this.search)
      }
    }
  }
</script>
<style lang="less" scoped>
  .crewdoffset {
    /deep/.ant-select-selection{
      border-radius: 4px;
    }
    .card_title {
      color: rgba(16, 16, 16, 100);
      font-size: 20px;
      margin-bottom: 18px;
      font-weight: 600;
    }
    .bgg {
      border-radius: 8px;
      margin-top: 10px;
      padding: 10px;
    }
    .groupbox {
      /deep/ .ant-input {
        border-radius: 4px;
      }
    }
    /deep/.ant-table-body{
      border: 1px solid #BBBBBB;
      border-radius: 8px 8px 0 0;
    }
    /deep/.ant-table-tbody{
      background-color: #ffffff;
    }
    /deep/.ant-table-pagination.ant-pagination{
      float: none!important;
      margin: 16px auto!important;
      text-align: center!important;
    }

  }
</style>
